<!doctype html>
<html lang="en-US">

<head>
  <link href="/assets/index.css" rel="stylesheet" type="text/css" />
  <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
  <script crossorigin="anonymous" src="/test-harness.js"></script>
  <script crossorigin="anonymous" src="/test-page-object.js"></script>
  <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
</head>

<body>
  <main id="webchat"></main>
  <script type="text/babel">
    run(async function () {
      const {
        React,
        ReactDOM: { render },
        WebChat: { FluentThemeProvider, ReactWebChat }
      } = window; // Imports in UMD fashion.

      const { directLine, store } = testHelpers.createDirectLineEmulator();

      const App = () => <ReactWebChat directLine={directLine} store={store} />;

      render(
        <FluentThemeProvider>
          <App />
        </FluentThemeProvider>,
        document.getElementById('webchat')
      );

      await pageConditions.uiConnected();

      await directLine.emulateIncomingActivity({
        type: 'message',
        textFormat: 'plain',
        text: 'Please select one of the actions below',
        suggestedActions: {
          actions: [
            {
              image: `https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/square-icon.png`,
              imageAltText: 'a blue square',
              title: 'IM back as string',
              type: 'imBack',
              value: 'postback imback-string'
            },
            {
              image: `https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/square-icon-red.png`,
              imageAltText: 'a red square',
              title: 'Post back as string',
              type: 'postBack',
              value: 'postback postback-string'
            },
            {
              image: `https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/square-icon-green.png`,
              imageAltText: 'a green square',
              title: 'Post back as JSON',
              text: 'Some text',
              type: 'postBack',
              value: {
                hello: 'World!'
              }
            },
            {
              image: `https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/square-icon-purple.png`,
              imageAltText: 'a purple square',
              displayText: 'say Hello World!',
              title: 'Message back as JSON with display text',
              text: 'Some text',
              type: 'messageBack',
              value: {
                hello: 'World!'
              }
            },
            {
              image: `https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/square-icon-purple.png`,
              imageAltText: 'a purple square',
              title: 'Message back as JSON without display text',
              type: 'messageBack',
              value: {
                hello: 'World!'
              }
            },
            {
              displayText: 'Aloha',
              image: `https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/square-icon-purple.png`,
              imageAltText: 'a purple square',
              text: 'echo Hello',
              title: 'Aloha',
              type: 'messageBack'
            }
          ],
          to: []
        }
      });

      document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`).focus();

      // WHEN: Focus suggested actions
      await host.sendShiftTab();

      // THEN: Should focus first suggested action
      await host.snapshot();
      const firstAction = document.activeElement;

      // WHEN: Press arrow right key four times:
      await host.sendKeys('ARROW_RIGHT'); // 2nd
      await host.sendKeys('ARROW_RIGHT'); // 3rd
      await host.sendKeys('ARROW_RIGHT'); // 4th
      await host.sendKeys('ARROW_RIGHT'); // 5th
      await host.sendKeys('ARROW_RIGHT'); // 6th

      // THEN: Should focus the last suggested action
      expect(document.activeElement?.innerText).toContain('Aloha');
      const lastAction = document.activeElement;
      await host.snapshot();

      // WHEN: escape key is pressed
      await host.sendKeys('ESCAPE');

      // THEN: Should focus sendbox
      expect(document.activeElement).toBe(
        document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`)
      );
      await host.snapshot();

      // WHEN: Focus suggested actions
      await host.sendShiftTab();

      // THEN: Should focus the last suggested action
      expect(document.activeElement).toBe(lastAction);

      // WHEN: Press arrow right again
      await host.sendKeys('ARROW_RIGHT');

      // THEN: Should wrap around to the first action
      expect(document.activeElement).toBe(firstAction);

      // WHEN: Press arrow left and space keys
      await host.sendKeys('ARROW_LEFT');
      await (await directLine.actPostActivity(() => host.sendKeys(' '))).resolveAll();

      // THEN: Should wrap around, send last action and focus sendbox
      expect(document.activeElement).toBe(
        document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`)
      );
      await host.snapshot();
    });
  </script>
</body>

</html>